<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button id="btn"></button>
        <button id="btn2">减少</button>
        <button id="btn3">不监听</button>
    </div>
    <script src="./node_modules/redux/dist/redux.js"></script>
    <script>
        const INCREMENT='INCREMENT';
        const DECREMENT='DECREMENT';
        const {createStore}=Redux;
        const store=createStore(reducer);
        function reducer(state={num:0},action){
            //一般用于深克隆
            state=JSON.parse(JSON.stringify(state));
            switch(action.type){
                case INCREMENT:
                    ++ state.num;
                  break;
                case DECREMENT:
                    --state.num;
                    break;
            }
            return state;
        }
        function render(){
            btn.innerText=store.getState().num;
        }
        render();
        btn.onclick=function(){
            store.dispatch({type:INCREMENT});
        }
        btn2.onclick=function(){
            store.dispatch({type:DECREMENT});
        }
        // store.subscribe(()=>{
        //     render();
        // })
        /*
        store.subscribe有一个返回值(函数)，返回的解除监听状态，只要调用这个返回函数
        那么就不在做状态监听，但是状态继续变化，是不会影响store中state更新
        
        */
        let unsub=store.subscribe(()=>{
            render();
            console.log("更新了")
        })
        btn3.onclick=function(){
            unsub()
            console.log(unsub)
        }
    </script>
</body>
</html>